<template>
  <section class="shoppingList">
    <goback :getName='goName' :getURL ="goType" :getBtn='goBtn'></goback>
    <dl class="sList"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
      infinite-scroll-immediate-check ="loading">

      <dd v-for="(sListArr, index) in sListArr" :key="index">
        <section class="_left">
          <img v-bind:src="sListArr.img" alt="">
          <span class="_price">            
            {{sListArr.price / 100}}乐豆
          </span>
        </section>
        <section class="_right">
          <p class="_num">
            {{'x' + sListArr.num}}
          </p>
          <p class="_type">            
            {{sListArr.type | changeType}}
          </p>
        </section>
      </dd>
    </dl>
    <!-- 加载动画 -->
    <loadmore  v-show="loadingDom"></loadmore>
  </section>
</template>
<script>
import { getExchangeList } from '../../libs/interface'
import { userInfoGet } from '../../libs/publicMethod'
import goback from '../../components/goback'
import loadmore from '../../components/loadmore'
  export default {
    components:{ getExchangeList, userInfoGet, loadmore, goback },
    data () {
      return{
        loading:false, // 下拉加载
        loadingDom:false, // 下拉加载
        pageIndex: 0, // 加载页码
        sListArr: [], // 记录数组
        goName: '购物清单',
        goType: '', // 导航返回页面，如返回上一级则为空
        goBtn: '', // 导航右边菜单，如没有则不填
      }
    },
    mounted(){
      let params = {
        memberid:userInfoGet().id,
        pageIndex:1,
        pageSize:10
      }
      getExchangeList(params, (data) => {
        if(data.code == 1 && data.payload.list.length > 0) {
          this.sListArr = data.payload.list
        } else {
          this.$toast(data.msg)
        }
      })
    },
    methods:{
      loadMore(){
        let vm = this
        vm.loading = true;
        vm.loadingDom = true;
        vm.pageIndex = 1 + vm.pageIndex;
        let params = {
          memberid:userInfoGet().id,
          pageIndex:vm.pageIndex,
          pageSize:10
        }
        getExchangeList(params, (data)=>{       
          if (data.code == 1 && data.payload.length>0) {
            vm.$nextTick(()=>{
              data.payload.forEach((item) => {              
                vm.sListArr.push(item);
              })
            })
            vm.loading = false;
          }else{
            this.loading = true;
            vm.pageIndex -= 1;
            vm.$toast('暂未请求到数据,请稍后再试')
          }
          vm.loadingDom = false;
        })
      }
    },
    filters:{
      changeType(val){
        switch(val){
          case '1':
            return '已兑换'
          default :
            return '已发货'
        }
      }
    }
  }
</script> 
<style scoped>
.shoppingList ._title{
  padding: .5rem;
}
.shoppingList {
  background-color: white;
}
.sList dd{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: .5rem;
  border-top: 1px solid #aaa;
}
.sList dd ._left{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 50%;
}
.sList dd ._left img{
  width: 50%;
}
</style>
